<template>
  <el-row>
    <WellData :list="data1" />
    <div class="optinos">
      <el-button type="danger" style="margin: 5px 0px" @click="goback()">
        返回
      </el-button>
      <br />
      <el-button @click="goTop" type="info"> 顶部 </el-button>
    </div>
  </el-row>
</template>

<script>
import WellData from './comprehensiveDataSheet/index'
import {
  getGeneralDataReport,
  getWellCasingSize,
} from '../../../api/module/dataquery.js'

export default {
  components: {
    WellData,
  },
  data() {
    return {
      form: {},
      pager: {},
      data1: [{},{},{},{},{}],
      loading: false,
      wellName: '',
    }
  },
  created() {
    this.form = this.$route.params.filterForm
    this.pager = this.$route.params.pager
    this.wellName = this.$route.params.id
    this.handleGetWellCasingSize()
  },
  methods: {
    goback() {
      this.$router.push({
        name: 'wellQuery',
        params: { filterForm: this.form, pager: this.pager },
      })
    },
    handleGetWellCasingSize() {
      getWellCasingSize({ wellName: this.wellName })
        .then((res) => {
          this.dealQueryList(this.wellName, res.data.data)
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
        })
    },
    dealQueryList(wellName, list) {
      let queryList = []
      list.forEach((l) => {
        queryList.push({
          wellName: this.wellName,
          casingSize: l,
        })
      })
      this.handleGetGeneralDataReport(queryList)
    },
    handleGetGeneralDataReport(queryList) {
      this.loading = true
      getGeneralDataReport(queryList)
        .then((res) => {
          this.data1 = res.data.data
          while (5 - this.data1.length > 0) {
            this.data1.push({})
          }
          this.loading = false
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
        })
    },
    goTop(){
      document.querySelector("#CM_WK_BASIC").scrollIntoView(true)
    } 
  },
}
</script>

<style scoped>
.optinos {
  position: fixed;
  bottom: 10%;
  right: 0px;
}
</style>
